草庐IT

CSS 响应中心 Div

全部标签

javascript - 如何使用cq :includeClientLib in CQ5 to include CSS and Javascript

CQ5usingclientLibrary[cq:includeClientLib]中的js和cssinclude概念是什么?最好有一个带有屏幕截图的示例。 最佳答案 关于您的问题,请找到以下链接:http://experiencedelivers.adobe.com/cemblog/en/experiencedelivers/2012/12/clientlibs-explained-by-example.html 关于javascript-如何使用cq:includeClientLib

javascript - CSS 3D变换以制作给定边长的梯形

我有一个给定尺寸(比如100x300像素)的元素,它位于高度相同且宽度可变的容器中,我想使用rotateX围绕-webkit-transform-进行转换origin:topcenter;在选择容器的-webkit-perspective时,图像的底线看起来保持在原处,但只会扩展以填充整个容器。哇,这听起来令人困惑。这是一张照片:基本上,我想创建一个上部宽度固定、下部宽度可变的梯形。但是我不能完全弄清楚关系背后的数学......欢迎使用Javascript。以下示例适用于正文宽度为600像素的情况:http://jsfiddle.net/24qrQ/现在的任务是随着body的宽度不断改

javascript - 使用javascript设置CSS动画延迟

我的css文件中有一些关键帧动画。已经指定了一个动画延迟。包装器div具有属性数据延迟。我想获取css文件中的animation-delay,并为其添加data-delay的值。然后我希望动画以新的延迟开始。我尝试了ele[i].style.animationDelay。但似乎这会返回null,直到我为其设置一个值。如果我设置ele[i].style.animationDelay='5s'动画仍然会随着css文件的延迟运行。HTMLHitest!CSSbody{font-size:300%;}#wrapperh1{position:absolute;}#hi{transform:tra

javascript - javascript 中的 bg 颜色、悬停、!important 和 .css

我遇到了一个问题。我已经创建了一些“选项卡”功能,如演示中所示:http://jsfiddle.net/4FLCe/计划是,当您将鼠标悬停在选项卡上时,其颜色变为颜色A,当您单击选项卡时,其颜色变为颜色B。从演示中可以看出,单击后悬停时背景颜色停止变化。我想在悬停的背景颜色中添加!important,结果可以看到:http://jsfiddle.net/4FLCe/1/但是这并不像我想要的那样执行,悬停现在可以在javascript设置的背景颜色上工作。然后我将!important添加到javascript中的颜色集。这导致了一些可怕的事情。唯一理解我想要实现的目标的浏览器是Opera

javascript - 在窗口调整大小时调整 div 大小

我有这个代码html,body{width:100%;margin:0;padding:0;}#main{margin:0auto;width:963px;height:642px;}#preload{display:block;position:absolute;width:100%;height:100%;}.loading{position:absolute;top:43%;left:47%;z-index:2;display:none;}$(document).ready(function(){$(window).on('resize',function(){varmaxWid

javascript - 如何选择下一个div?

我在一个页面中多次出现这个部分:Views我现在正在为a.showComment点击事件在js文件中编写代码。现在我想选择下一个div.writeComment。如何选择它? 最佳答案 在变量nextDiv中你可以做任何你想做的事情使用.nextAll()方法允许我们在DOM树中搜索这些元素的后继元素,并从匹配元素构造一个新的jQuery对象。使用.next()搜索您点击的DOM元素试试这个:$('.showComment').click(function(){varnextDiv=$(this).nextAll("div.writ

javascript - Gridster - 保存 div 的 html 内容以动态加载网格

我已经用gridster做了一些测试,我可以保存一些gridster数据,比如坐标、大小、ids等。但我无法保存填充gridster的div的内容,我可以稍后加载每个元素的gridster坐标。这是我的代码:$(document).ready(function(){vargrid_canvas=$("#homepage>#grid").gridster({widget_margins:[10,10],widget_base_dimensions:[140,140],widget_selector:".gs_w",shift_larger_widgets_down:false,seria

javascript - 可在特定的 div 内拖动

我正在从事一个使用了可拖动事件的元素。现在的问题是draggable()事件对我来说效果很好......但是因为我想存储我的位置,所以我使用了以下javascript。这个也很好用......但问题是它适用于整个屏幕。我只是希望它仅通过使用此代码在特定的parentdiv上运行。那有可能吗?function$(el){returndocument.getElementById(el);}vartzdragg=function(){return{move:function(divid,xpos,ypos){vara=$(divid);$(divid).style.left=xpos+'p

javascript - 我可以使用 Javascript 为同一个 CSS 属性设置多个值吗?

我想以编程方式将CSScursor值设置为-webkit-grab和-moz-grab。例如,在样式表中,它将表示为mySelector{cursor:-webkit-grab;cursor:-moz-grab;}所以在这里,mySelector元素定义了两次光标。Webkit浏览器使用第一个定义,Firefox使用第二个。我想知道Javascript中是否有任何方法可以做同样的事情。我意识到我可以设置一个类(class),但我的问题更多是出于好奇,看看是否可行,而不是解决我目前遇到的现实问题。编辑澄清一下-我发布的CSS(尽管有一个有效的选择器)在两种浏览器中都有效。我只是想知道是否

javascript - 在 Div 后面画线

我正在看这个fiddle:http://jsfiddle.net/kDs2Q/45/有没有办法以某种方式对div/行进行分层,以便该行位于其他div的后面?我希望能够从一个div的中心到另一个div的中心绘制一条线,但看不到该线穿过实际的框。这就是我对中心到中心的看法:varoff1=getOffset(div1);varoff2=getOffset(div2);varx1=off1.left+off1.width/2;vary1=off1.top+off1.height/2;varx2=off2.left+off1.width/2;vary2=off2.top+off1.height